<template>
   <div class="shopInfoShop">
      <div class="left" :style="{height:$store.state.minHeight-3.35+'rem'}">
         <div v-for="(x,y) in leftList" :class="isShow == y?'leftBox show':'leftBox'" @click="leftShow(y,x)">
            <transition name="el-zoom-in-center">
               <p class="ht1" v-show="isShow == y"></p>
            </transition>
            <p class="leftTxt"><span>{{x.name}}</span><span v-show="isShow == y">{{x.description}}</span></p>
         </div>
      </div>
      <div class="right" :style="{height:$store.state.minHeight-3.35+'rem'}">
         <div class="rightBox" v-for="(x,y) in rightList">
            <img :src="$store.state.imgurlApi+x.image" alt="">
            <div class="rightBox-l">
               <p class="rt-l-name">{{x.title}}</p>
               <p class="rt-l-ys">已销售{{x.sales}} | 好评{{100}}%</p>
               <div class="rt-l-money"><p>
                  <span style="font-size: .09rem">￥</span><span>{{x.price}}</span><span style="font-size: .1rem;text-decoration: line-through">￥{{x.original_price}}</span>
               </p><p class="rt-l-xgg" @click="isGuige(x)">选规格 </p>
                  <img v-show="false" src="../../../../static/img/jiarugouwuche.png" alt="" class="rt-l-add" @click="addCar">
               </div>
            </div>
            <span class="rt-l-num" v-show="buyNum(x.id)">{{buyNum(x.id)?buyNum(x.id):''}}</span>
         </div>
      </div>
      <div class="footer">
         <div class="footer-l">
            <div class="ft-l-img" @click="carShow = !carShow">
               <img src="../../../../static/img/gouwuche111.png" alt="">
               <p class="ft-l-num">{{allNum()}}</p>
            </div>
            <p class="ft-hj">
               <span style="font-size: .14rem;color: #7E7E7E">合计：</span>
               <span>￥</span>
               <span style="font-size: .22rem">{{allMoney().split('.')[0]}}.</span>
               <span>{{allMoney().split('.')[1]}}{{psLook?'(含包装费)':''}}</span>
            </p>
         </div>
         <div class="ft-btn" @click="settlement">去结算</div>
         <van-popup v-model="carShow" round position="bottom" :style="{ height: '45%',bottom:'.6rem' }">
            <div class="car_wrap">
               <div class="car_top">
                  <p>包装费: &nbsp;&nbsp;<span style="color: #ED2421">￥{{psLook?psMoney[1]:0}}</span></p>
                  <p class="empty" @click="emptyShow=true">清空购物车</p>
               </div>
               <div class="car_itemWrap">
                  <div class="car_item" v-for="(x,z) in carArr">
                     <div class="car_item_left">
                        <img :src="$store.state.imgurlApi+x.image" alt="">
                     </div>
                     <div class="car_item_right">
                        <p class="car_item_name">{{x.title}}</p>
                        <div class="car_item_kw"><p>规格:&ensp;</p><p v-for="l in x.gg">{{l}}</p></div>
                        <div class="car_item_bot">
                           <div class="car_item_money"><p>￥{{x.price}}</p><p>x{{x.number}}</p></div>
                           <div class="car_item_num">
                              <img src="../../../../static/img/jian001.png" alt="" @click="setNum(0,z)">
                              <p>{{x.number}}</p>
                              <img src="../../../../static/img/jia001.png" alt="" @click="setNum(1,z)"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </van-popup>
      </div>
      <!--  选择支付  -->
      <!--  选择支付  -->
      <van-popup v-model="look" class="fkPopup" :style="{maxHeight:$store.state.minHeight*.7+'rem'}">
         <div class="fkbox">
            <div class="fktit">{{shopInfo.title}}</div>
            <div class="fkitem" v-for="(item1,y1) in Specifications">
               <p>{{item1.name}}</p>
               <div>
                  <p v-for="(x,y) in item1.children" :class="x.name==arr[y1]?'selected':''" @click="selGG(y1,y,x.id,x)">
                     {{x.name}}</p>
               </div>
            </div>
            <div class="fkNum">
               <p>数量</p>
               <van-stepper v-model="value" theme="round" button-size="22" min="1" max="99" @change="selectNum" disable-input/>
            </div>
            <div class="yxguige">
               <p>已选规格：</p>
               <p><span v-for="x in arr">{{x}}&nbsp;&nbsp;</span>&ensp;x&ensp;{{value}}</p>
            </div>
            <div class="guifoot">
               <p><span>￥</span>{{price}}</p>
               <p @click="closeGuiGe(shopInfo)">确定</p>
            </div>
            <p style="height: .01rem;width:100%;"></p>
         </div>
      </van-popup>

      <!--  询问弹窗  -->
      <van-dialog v-model="emptyShow" title="确定清空购物车吗" show-cancel-button width="3.2rem" @confirm="confirm">

      </van-dialog>
   </div>
</template>

<script>

    import Vue from 'vue';
    import {Notify} from 'vant';

    Vue.use(Notify);
    export default {
        name: "shopInfoShop",
        data() {
            return {
                leftList: [],
                rightList: [],
                isShow: 0,
                shopInfo: [], // 商品详情
                Specifications: [], // 商品规格
                arr: [], // 当前已选规格
                price: 0, // 当前商品价格
                money: 0, // 数据价格
                SpecificationsPrice: [], // 当前商品规格价格列表
                SpecificationsIndex: [], // 当前商品规格ID
                look: false,
                show1: false,
                sel1: '外卖配送',
                actions: [
                    {name: '到店自取'},
                    {name: '外卖配送'},
                ],
                showList: true,
                carShow: false,
                emptyShow: false,
                value: 1,
                carArr: [], // 购物车
                psMoney: [0, 0],
                psLook: false, // 是否包含配送费
            }
        },
        beforeCreate() {
            if (!this.$myStorage.query()) {
                this.$myNotice('请登录!', 1500);
                return;
            }
            // 获取用户购物车
            var data = this.$myStorage.getItem(1, 'userCar');
            if (data) {
                data = JSON.parse(data)
                console.log(data)
                if (data.user == this.$myStorage.query()) {
                    if (data.carArr.length>0) {
                        for (var i of data.carArr) {
                            console.log(1515151515151)
                            if (i[0].store_id == this.$route.query.id) {
                                this.$nextTick(() => {
                                    this.carArr = i;
                                });
                                return;
                            }
                        }
                    }
                }
            } else {
                if (!this.$myStorage.query()) {
                    return
                }
                this.$myStorage.setItem('localStorage', 'userCar', JSON.stringify({
                    user: this.$myStorage.query(),
                    carArr: []
                }));
            }
        },
        created() {
            console.log(this.$route.query.id)
            // 请求商家商品分类
            this.$myAxios('api/goodsCategory/category_list', 'get', {
                store_id: this.$route.query.id
            }).then(res => {
                console.log(res.data)
                if (res.data.code == 1) {
                    this.leftList = res.data.data.list;
                    this.leftShow(this.isShow, this.leftList[this.isShow])
                } else {
                    this.$myNotice('请检查网络~', 1500);
                }
            });
            // 获取包装费与配送费
            this.$myAxios('store/index/info', 'post', {
                store_id: this.$route.query.id
            }).then(res => {
                console.log(res.data);
                if (res.data.code == 1) {
                    this.psMoney = [res.data.data.config_info[20].value, res.data.data.config_info[21].value]
                } else {
                    this.$myNotice('包装费获取失败~', 1500)
                }
            });
        },
        computed:{
            buyNum() {
                return (id) => {
                    var look = 0;
                    for (var i of this.carArr) {
                        if (i.id == id) {
                            look += i.number*1;
                        }
                    }
                    return look;
                }
            },
        },
        methods: {
            closeGuiGe(x) {
                var look = 0;
                var newArr = [...this.carArr];
                if (this.carArr.length < 1) {
                    newArr.push({
                        id: x.id,
                        image: x.image,
                        price: this.money,
                        title: x.title,
                        store_id: x.store_id,
                        number: this.value,
                        gg: [...this.arr]
                    })
                } else {
                    console.log(19777777)
                    for (var i in this.carArr) {
                        if (this.carArr[i].id == x.id) {
                            var p = true;
                            for (var z in this.carArr[i].gg) {
                                if (this.arr[z] != this.carArr[i].gg[z]) {
                                    p = false;
                                    break
                                }
                            }
                            if (p) {
                                look = 1;
                            } else {
                                look = 2
                            }
                        }
                        if (look == 1) {
                            newArr[i].number = newArr[i].number * 1 + this.value;
                            newArr[i].price = this.money;
                            break;
                        } else {
                            look = 2;
                        }
                    }

                    if (look == 2) {
                        newArr.push({
                            id: x.id,
                            image: x.image,
                            price: this.money,
                            title: x.title,
                            store_id: x.store_id,
                            number: this.value,
                            gg: [...this.arr]
                        })
                    }
                }
                this.carArr = newArr;
                this.look = false;
                console.log(this.carArr)
            },
            isGuige(x) {
                this.look = true;
                // 请求商品数据
                this.$myAxios('api/goods/detail', 'get', {
                    goods_id: x.id
                }).then(res => {
                    this.arr = [];
                    this.value = 1;
                    this.shopInfo = res.data.data.goods_info;
                    this.Specifications = res.data.data.skuList;
                    this.SpecificationsPrice = res.data.data.skuPrice;
                    this.price = this.SpecificationsPrice[0].price * 1;
                    this.money = this.SpecificationsPrice[0].price * 1;
                    this.SpecificationsIndex = this.SpecificationsPrice[0].goods_sku_ids.split(',');
                    // 预定义规格选择
                    for (var i of res.data.data.skuList) {
                        this.arr.push(i.children[0].name)
                    }
                });
            },
            // 选择规格
            selGG(y1, y, id, x) {
                var arr = [...this.arr];
                arr[y1] = this.Specifications[y1].children[y].name;
                this.arr = arr;
                this.SpecificationsIndex[y1] = id;
                // 计算价格
                for (var i of this.SpecificationsPrice) {
                    if (i.goods_sku_ids == this.SpecificationsIndex.join(',')) {
                        this.price = i.price * this.value;
                        this.money = i.price;
                        break;
                    }
                }

            },
            onSelect(item) {
                // 默认情况下点击选项时不会自动收起
                // 可以通过 close-on-click-action 属性开启自动收起
                this.show1 = false;
                this.sel1 = item.name;
            },
            leftShow(index, x) {
                this.isShow = index;
                this.$myAxios('api/goods/goods_list', 'get', {
                    offset: 0,
                    store_id: this.$route.query.id,
                    category_id: x.id,
                    status: 'up'
                }).then(res => {
                    if (res.data.code == 1) {
                        this.rightList = res.data.data.list;
                    } else {
                        this.$myNotice('网络出现了问题~', 1500)
                    }
                })
            },
            allNum() {
                var num = 0;
                for (var i of this.carArr) {
                    num += i.number;
                }
                return num;
            },
            allMoney() {
                var num = 0;
                for (var i of this.carArr) {
                    num += i.price * i.number;
                }
                if (this.carArr.length >= 1) {
                    num += this.psMoney[1] * 1;
                    this.psLook = true;
                }else {
                    this.psLook = false;
                }
                return (num).toFixed(2);
            },
            setNum(type, index) {
                if (type) {
                    // 加
                    this.carArr[index].number += 1;
                } else {
                    if (this.carArr[index].number <= 1) {
                        this.carArr.splice(index, 1);
                    } else {
                        this.carArr[index].number -= 1;
                    }
                }
                this.allNum();
                this.allMoney();
            },
            confirm() {
                var data = JSON.parse(this.$myStorage.getItem(1, 'userCar'));
                if (data) {
                    if (data.user == this.$myStorage.query()) {
                        for (var i in data.carArr) {
                            if (data.carArr[i][0].store_id == this.$route.query.id) {
                                data.carArr.splice(i, 1);
                            }
                        }
                        this.$myStorage.setItem('localStorage', 'userCar', JSON.stringify(data));
                        this.carArr = [];
                    }
                }
                this.carShow = false;
            },
            // 数量变化
            selectNum(value) {
                // 计算价格
                for (var i of this.SpecificationsPrice) {
                    if (i.goods_sku_ids == this.SpecificationsIndex.join(',')) {
                        this.price = i.price * this.value;
                        break;
                    }
                }
            },
            // 加入购物车
            addCar() {
                // this.notice('success','加入成功');
            },
            settlement() {
                this.$router.push({
                    name: 'manyOrder',
                    query:{
                        data:this.psMoney,
                        id:this.$route.query.id
                    }
                })
            }
        },
        watch:{
            carArr(){
                // 存储购物车信息
                var uCar = JSON.parse(this.$myStorage.getItem(1, 'userCar'));
                if (uCar.user == this.$myStorage.query()) {
                    var suo = false;
                    var arr = uCar.carArr;
                    if (arr.length>=1 && this.carArr.length >= 1) {
                        for (var p in arr) {
                            if (arr[p][0].store_id == this.$route.query.id) {
                                arr[p] = this.carArr;
                                suo = true;
                                break;
                            }
                        }
                    }
                    if (!suo && this.carArr.length>0) {
                        uCar.carArr.push(this.carArr)
                    }
                }
                this.$myStorage.setItem('localStorage','userCar',JSON.stringify(uCar))
            }
        }
    }
</script>

<style scoped>
   .shopInfoShop {
      width: 100%;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      font-family: PingFang SC;
   }

   .left {
      width: 30%;
      overflow-x: hidden;
      background-color: #ffffff;
   }

   .right {
      overflow-x: hidden;
      width: 70%;
      background-color: #F5F5F5;
      box-sizing: border-box;
      padding: .1rem .15rem;
   }

   .leftBox {
      height: .44rem;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-flow: row;
      align-items: center;
      padding-left: .15rem;
      color: #343434;
   }

   .ht1 {
      width: .03rem;
      height: 100%;
      background-color: #FE4845;
      position: absolute;
      left: 0;
      top: 0;
   }

   .ht2 {
      width: .15rem;
      height: .15rem;
      background: rgba(254, 72, 69, 1);
      border-radius: .02rem;
      margin-right: .05rem;
   }

   .leftTxt {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
   }

   .leftTxt > span {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
      font-size: .14rem;
   }

   .leftTxt > span:nth-child(2) {
      font-size: .1rem;
   }

   .show {
      color: #FE4845 !important;
   }

   .rightBox {
      width: 100%;
      height: .7rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      margin-bottom: .25rem;
      position: relative;
   }

   .rightBox > img {
      width: .7rem;
      height: .7rem;
   }

   .rightBox-l {
      width: calc(100% - .7rem);
      height: 100%;
      box-sizing: border-box;
      padding-left: .05rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }

   .rt-l-name {
      font-size: .13rem;
      font-weight: bold;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .rt-l-ys {
      font-size: .1rem;
      font-weight: 500;
      color: #808080;
   }

   .rt-l-money {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .rt-l-money > p:nth-child(1) {
      font-size: .13rem;
      font-weight: 400;
      color: #999999;
   }

   .rt-l-add {
      width: .27rem;
      height: .27rem;
   }

   .rt-l-xgg {
      width: .57rem;
      height: .29rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
      border-radius: .14rem;
      text-align: center;
      line-height: .29rem;
      font-size: .12rem;
      font-weight: 500;
      color: #ffffff;
      position: relative;
   }

   .rt-l-num {
      position: absolute;
      border-radius: 50%;
      background-color: rgba(237, 36, 33, 1);
      color: white;
      width: .2rem;
      height: .2rem;
      text-align: center;
      line-height: .2rem;
      left: -.1rem;
      top: -.05rem;
      font-size: .12rem;
   }

   .footer {
      width: 100%;
      height: .6rem;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      flex-flow: row;
      align-items: center;
      box-sizing: border-box;
      padding: 0 .15rem;
      justify-content: space-between;
      background-color: #ffffff;
   }

   .footer-l {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .ft-l-img {
      width: .3rem;
      height: .23rem;
      position: relative;
      text-align: center;
      margin-right: .15rem;
   }

   .ft-l-img > img {
      width: .26rem;
      height: .23rem;
   }

   .ft-l-num {
      width: .2rem;
      height: .2rem;
      background: rgba(237, 36, 33, 1);
      border-radius: 50%;
      font-size: .1rem;
      text-align: center;
      line-height: .2rem;
      color: #ffffff;
      font-weight: 500;
      position: absolute;
      top: -.15rem;
      right: -.11rem;
   }

   .ft-hj {
      color: #EE2826;
      font-size: .12rem;
      font-weight: 500;
   }

   .ft-btn {
      width: .91rem;
      height: .35rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
      border-radius: .17rem;
      text-align: center;
      line-height: .35rem;
      font-size: .15rem;
      font-weight: bold;
      color: #ffffff;
   }


   .ggfukuan {
      width: 100%;
      /*height: 6.67rem;*/
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, .6);
   }


   .fktit {
      height: .5rem;
      line-height: .5rem;
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #282828;
   }

   .fkitem {
      margin-bottom: .1rem;
   }

   .fkitem > p {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #242424;
      margin-bottom: .1rem;
   }

   .fkitem > div {
      width: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
      /*justify-content: space-between;*/
   }

   .fkitem > div > p:nth-child(2) {
      margin: 0 .2rem;
   }

   .fkitem > div > p {
      width: .8rem;
      height: .36rem;
      background: rgba(241, 241, 241, 1);
      border: .01rem solid #F1F1F1;
      border-radius: .07rem;
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666666;
      text-align: center;
      line-height: .36rem;
   }

   .yxguige {
      height: .4rem;
      width: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
      background-color: #FAFAFA;
   }

   .yxguige > p:nth-child(1) {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
   }

   .yxguige > p:nth-child(2) {
      color: #333333;
   }

   .guifoot {
      height: .6rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .guifoot > p:nth-child(1) {
      font-size: .24rem;
      font-family: San Francisco Display;
      font-weight: 500;
      color: #FF433C;
   }

   .guifoot > p:nth-child(1) > span {
      font-size: .16rem;
   }

   .guifoot > p:nth-child(2) {
      width: 1.08rem;
      height: .35rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
      border-radius: .17rem;
      line-height: .35rem;
      text-align: center;
      color: #ffffff;
      font-size: .15rem;
      font-family: Adobe Heiti Std;
      font-weight: normal;
   }

   .closeGuiGe {
      width: .38rem;
      height: .38rem;
      position: absolute;
      left: calc(50% - .19rem);
      bottom: -.52rem;
   }

   .selected {
      background: rgba(255, 239, 220, 1) !important;
      border: .01rem solid rgba(255, 118, 17, 1) !important;
      color: #FF7611 !important;
   }

   .car_wrap {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
   }

   .car_top {
      width: 100%;
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 .2rem;
      border-bottom: .01rem solid #ECECEC;
   }

   .car_top > p:nth-child(1) {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666666;
   }

   .empty {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666666;
   }

   .car_itemWrap {
      width: 100%;
      height: 2.4rem;
      overflow-x: hidden;
      box-sizing: border-box;
      padding: .1rem .2rem;
   }

   .car_item {
      height: .75rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .15rem;
   }

   .car_item_left {
      width: .75rem;
      height: .75rem;
      margin-right: .15rem;
   }

   .car_item_right {
      width: calc(100% - .95rem);
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }

   .car_item_left > img {
      width: 100%;
      height: 100%;
   }

   .car_item_name {
      font-size: .15rem;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #282828;
      line-height: .16rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .car_item_kw {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .car_item_kw > p {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #717171;
      line-height: .15rem;
      margin-right: .1rem;
   }

   .car_item_bot {
      display: flex;
      flex-flow: row;
      align-items: flex-end;
      justify-content: space-between;
   }

   .car_item_money, .car_item_num {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .car_item_money > p:nth-child(1) {
      width: .8rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #171717;
   }

   .car_item_money > p:nth-child(2) {
      font-size: .12rem;
      font-family: PingFang SC;
      color: #424242;
   }

   .car_item_num {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .car_item_num > img {
      width: .2rem;
      height: .2rem;
   }

   .car_item_num > p {
      width: .3rem;
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: 500;
      text-align: center;
      color: #424242;
   }

   >>> .van-overlay {
      bottom: .6rem;
      top: initial;
   }

   /* 弹窗 */
   >>> .van-dialog {
      font-size: .16rem;
      border-radius: .16rem;
   }

   >>> .van-button--large {
      line-height: .48rem;
      height: .5rem;
   }

   >>> .van-button {
      font-size: .16rem;
      border-radius: .02rem;
   }

   >>> .van-dialog__header {
      line-height: .24rem;
   }

   >>> .van-dialog__header--isolated {
      padding: .24rem 0;
   }

   >>> .fkPopup {
      transform: translate3d(0, 0, 0);
      top: 15% !important;
      left: calc(50% - 1.65rem) !important;
      max-height: 70%;
      overflow-x: hidden;
      border-radius: .06rem;
   }


   .fkNum {
      height: .4rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .1rem;
   }

   .fkNum > p {
      margin: 0 !important;
   }

   .fkitem > p, .fkNum > p {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #242424;
      margin-bottom: .1rem;
   }

   .fkbox {
      width: 3.26rem;
      background: rgba(255, 255, 255, 1);
      border-radius: .06rem;
      margin: 0 auto;
      box-sizing: border-box;
      padding: .1rem .2rem;
      position: relative;
   }

   /* 弹窗适配 */
   >>> .fkPopup {
      padding: .02rem;
      background-color: transparent;
   }

   /* 加减数量适配 */
   >>> .van-stepper__minus, >>> .van-stepper__plus {
      width: .22rem !important;
      height: .22rem !important;
      padding: .04rem;
   }

   >>> .van-stepper__minus::before, >>> .van-stepper__plus::before {
      width: .13rem;
      height: .01rem;
   }

   >>> .van-stepper--round .van-stepper__plus {
      background-color: #FF7611;
   }

   >>> .van-stepper__minus::after {
      width: .13rem;
      height: .01rem;
   }

   >>> .van-stepper__plus::after {
      width: .01rem;
      height: .13rem;
   }

   >>> .van-stepper__input {
      border-width: .01rem 0;
      margin: 0 .02rem;
      font-size: .14rem;
      width: .32rem;
      height: .22rem !important;
   }

   /* 通知适配 */
   .van-notifys {
      padding: .08rem .16rem !important;
      font-size: .14rem !important;
      line-height: .34rem !important;
   }

   >>> .van-notifys {
      padding: .08rem .16rem !important;
      font-size: .14rem !important;
      line-height: .34rem !important;
   }
</style>
